<div nz-row nzGutter="16">
    <div nz-col class="gutter-row" nzSpan="12">
        <nz-card nzTitle="分类列表" [nzExtra]="extraTemplate">
            <nz-table #basicTable [nzData]="dataSet" nzBordered nzSize="middle" nzShowSizeChanger [nzHideOnSinglePage]="true" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" [nzFrontPagination]="false" [nzTotal]="total" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>分类名称</th>
                        <th nzWidth="110px">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of basicTable.data; let i = index">
                        <td>{{data.id}}</td>
                        <td>{{data.cName}}</td>
                        <td>
                            <button nzTitle="编辑" nzPlacement="top" nz-button nz-tooltip nzType="primary" nzSize="small" nzGhost style="margin-right:10px" (click)="handleEditCa(data)">
                            <i class="anticon anticon-edit"></i>
                        </button>
                            <nz-popconfirm [nzTitle]="'确认删除?'" (nzOnConfirm)="deleteRow(data)">
                                <button nzTitle="删除" nzPlacement="top" nz-button nz-tooltip nz-popconfirm nzType="danger" nzSize="small" nzGhost>
                                <i class="anticon anticon-delete"></i>
                            </button>
                            </nz-popconfirm>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
        <ng-template #extraTemplate>
            <button nz-button nzType="primary" [nzSize]="small" (click)="addCategory()">新增<i class="anticon anticon-plus"></i></button>
        </ng-template>
    </div>
    <div nz-col class="gutter-row" nzSpan="12">
        <nz-card nzTitle="标签列表" [nzExtra]="extraTemplateTag">
            <nz-table #basicTableTag [nzData]="dataSetTag" nzBordered nzSize="middle" nzShowSizeChanger [nzHideOnSinglePage]="true" [(nzPageIndex)]="pageIndexTag" [(nzPageSize)]="pageSizeTag" [nzFrontPagination]="false" [nzTotal]="totalTag" (nzPageIndexChange)="searchDataTag()"
                (nzPageSizeChange)="searchDataTag(true)">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>标签名称</th>
                        <th nzWidth="110px">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of basicTableTag.data; let i = index">
                        <td>{{data.id}}</td>
                        <td>{{data.tName}}</td>
                        <td>
                            <button nzTitle="编辑" nzPlacement="top" nz-button nz-tooltip nzType="primary" nzSize="small" nzGhost style="margin-right:10px" (click)="handleEditTag(data)">
                                <i class="anticon anticon-edit"></i>
                            </button>
                            <nz-popconfirm [nzTitle]="'确认删除?'" (nzOnConfirm)="deleteRowTag(data)">
                                <button nzTitle="删除" nzPlacement="top" nz-button nz-tooltip nz-popconfirm nzType="danger" nzSize="small" nzGhost>
                                    <i class="anticon anticon-delete"></i>
                                </button>
                            </nz-popconfirm>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </nz-card>
        <ng-template #extraTemplateTag>
            <button nz-button nzType="primary" [nzSize]="small" (click)="addTags()">新增<i class="anticon anticon-plus"></i></button>
        </ng-template>
    </div>
</div>

<nz-modal [(nzVisible)]="isVisible" [nzTitle]="caModalTigle" (nzOnCancel)="handleCancelAddCa()" (nzOnOk)="handleOkAddCa()" [nzBodyStyle]="{marginTop:'20px',marginBottom:'20px'}">
    <nz-input-group [nzAddOnBefore]="AddOnBe">
        <input type="text" nz-input [(ngModel)]="inputValueCa" [placeholder]="placeholderVal">
    </nz-input-group>
</nz-modal>